<template>
    <div class="modelBox">
        <div class="modelTitle">专业服务 更可靠</div>
        <div class="modelContent">一站式服务，全周期陪伴</div>
        <div class="modelBtn">
            <div class="modelBtnItem" v-for="(item, index) in itemList" :key="index">
                <div class="modelImg">
                    <img :src="getImg(item.img)" alt="" style="width: 100%; height: 100%" />
                </div>
                <div class="modelBtnTitle">{{ item.title }}</div>
                <div class="modelBtnDetail">{{ item.content }}</div>
                <!-- <div class="modelBtnDetail">{{ item.detail }}</div> -->
            </div>
        </div>
        <div class="modelBtn">
            <div class="modelBtnItem" v-for="(item, index) in itemList" :key="index">
                <div class="modelImg">
                    <img :src="getImg(item.img)" alt="" style="width: 100%; height: 100%" />
                </div>
                <div class="modelBtnTitle">{{ item.title }}</div>
                <div class="modelBtnDetail">{{ item.content }}</div>
                <!-- <div class="modelBtnDetail">{{ item.detail }}</div> -->
            </div>
        </div>
    </div>
</template>

<script setup>
const svgModules = import.meta.glob("~/assets/svg/*.svg", { eager: true });

const getImg = (cardContent) => {
    const key = `/assets/svg/${cardContent}.svg`;
    return svgModules[key]?.default || "/fallback.svg";
};
const itemList = ref([
    {
        title: "助力创始人",
        content: "降低成本，提高效率",
        detail: "推动业绩持续增长",
        img: "tubusi_w_index_video",
    },
    {
        title: "助力创始人",
        content: "降低成本，提高效率",
        detail: "推动业绩持续增长",
        img: "tubusi_w_index_mfjm",
    },
    {
        title: "助力创始人",
        content: "降低成本，提高效率",
        detail: "推动业绩持续增长",
        img: "tubusi_w_index_mxsc",
    },
    {
        title: "助力创始人",
        content: "降低成本，提高效率",
        detail: "推动业绩持续增长",
        img: "tubusi_w_index_ydcc",
    },
]);
</script>

<style lang="less" scoped>
.modelBox {
    background: var(--bjHomeWhite);
    padding-bottom: 140px;
    .modelBtn {
        display: flex;
        justify-content: center;
        .modelBtnItem {
            width: 315px;
            height: 220px;
            background: var(--white);
            box-shadow: 0px 0px 20px 0px var(--shadowHalf);
            border-radius: 24px;
            margin: 30px 15px 0 15px;
            .modelImg {
                width: 120px;
                height: 88px;
                margin: auto;
                margin-top: 24px;
            }
            .modelBtnTitle {
                font-weight: 500;
                font-size: 24px;
                color: var(--black);
                text-align: center;
                margin-top: 12px;
            }
            .modelBtnDetail {
                font-weight: 400;
                font-size: 16px;
                color: var(--writLightSix);
                margin-top: 10px;
                text-align: center;
            }
        }
    }
}
.modelTitle {
    font-weight: 600;
    font-size: 40px;
    color: var(--black);
    line-height: 56px;
    width: 100%;
    padding-top: 140px;
    box-sizing: border-box;
    text-align: center;
}
.modelContent {
    width: 100%;
    font-weight: 400;
    font-size: 20px;
    color: var(--black);
    line-height: 28px;
    text-align: center;
    margin-top: 16px;
    margin-bottom: 30px;
}
</style>
